<!-- wrapper for navigator elements -->
<div id="myNavi">
</div>

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable12" id="abc">

   <!-- root element for the items -->
   <div class="items">

      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
         <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
         <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
         <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
         <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
      </div>

      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
         <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
         <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
         <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
         <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
      </div>

      <!-- 10-15 -->
      <div>
         <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
         <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
         <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
         <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
         <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
      </div>

   </div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>

<script>

jQuery(function() {

  // Initialize the Scrollable control
  jQuery(".scrollable12").scrollable().navigator("#myNavi");

  // Get the Scrollable control
  var scrollable = jQuery(".scrollable12").data("scrollable");

  // Set to the number of visible items
  var size = 2;

  // Handle the Scrollable control's onSeek event
    scrollable.onSeek(function(event, index) {

        // Check to see if we're at the end
        if (this.getIndex() == 0) {
            jQuery("#abc").attr("style", "width:680px");
        }

    });

    // Handle the Scrollable control's onBeforeSeek event
    scrollable.onBeforeSeek(function(event, index) {
        if (this.getIndex() == 0) {
            jQuery("#abc").attr("style", "width:200px");
        }

    });

});

</script>

